<template>
  <div>
    <div class="loginBox">
      <el-form :model="loginForm"
               :rules="loginRules"
               ref="loginRef"
               class="loginForm"
      >
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="loginForm.code" placeholder="请输入验证码"></el-input>
        </el-form-item>
        <el-form-item prop="agreeChecked">
          <el-checkbox v-model="loginForm.agreeChecked">我已同意该用户协议</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     class="loginBtn"
                     :loading="loginLoading"
                     @click="submitForm">登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { loginWay } from '../api/login'
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        mobile: '13911111111',
        code: '246810',
        // 同意协议
        agreeChecked: true
      },
      loginRules: {
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          },
          {
            pattern: /^\d{6}$/,
            message: '长度在 6 个字符',
            trigger: 'blur'
          }
        ],
        agreeChecked: [{
          validator: (rule, value, callback) => {
            if (value) {
              callback()
            } else {
              callback(new Error('请同意用户协议'))
            }
          },
          trigger: 'blur'
        }]
      },
      // 按钮加载状态
      loginLoading: false
    }
  },
  methods: {
    /* 提交登录 */
    submitForm () {
      // 按钮加载
      this.loginLoading = true
      this.$refs.loginRef.validate(valid => {
        if (!valid) {
        // 未通过验证
          this.loginLoading = false
          return false
        } else {
          // 通过验证
          // this.$http.post('/mp/v1_0/authorizations', this.loginForm)
          loginWay(this.loginForm)
            .then(res => {
              // 存入本地存储
              window.localStorage.setItem('user', JSON.stringify(res.data.data))
              this.$message.success('登陆成功')
              this.$router.push('/')
            })
            .catch(() => {
              this.$message.error('登陆失败')
            }).finally(() => {
              this.loginLoading = false
            })
        }
      })
    }
  },
  created () {
  }
}
</script>

<style scoped lang="less">
  .loginBox {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("../../public/login_bg.jpg") no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loginForm {
    background: white;
    padding: 50px;
    min-width: 400px;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .loginBtn {
    width: 80%;
    transform: translateX(10%);
  }
</style>
